<!--
 * @PageName: @基本资料
 * @Description: 
 * @FilePath: /glm-mes-pc/src/views/system/user/profile/userInfo.vue
-->
<template>
	<el-form ref="userRef" :model="user" :rules="rules" label-width="80px">
		<el-form-item label="用户名称" prop="nickName">
			<el-input v-model="user.nickName" maxlength="30" :disabled="checkRole(['gys', 'wxgys', 'mlgys', 'flgys', 'jpgs'])" />
		</el-form-item>
		<el-form-item label="手机号码" prop="phonenumber">
			<el-input v-model="user.phonenumber" maxlength="11" readonly>
				<template #append>
					<div @click="changePhone">修改手机号码</div>
				</template>
			</el-input>
		</el-form-item>

		<el-form-item label="银行账号" prop="bankCardNumber" v-if="checkRole(['gys'])">
			<el-input v-model="user.bankCardNumber" />
		</el-form-item>

		<el-form-item label="公司地址" prop="address" v-if="checkRole(['gys'])">
			<el-input v-model="user.address" />
		</el-form-item>

		<el-form-item label="邮箱" prop="email">
			<el-input v-model="user.email" maxlength="50" />
		</el-form-item>
		<el-form-item label="性别">
			<el-radio-group v-model="user.sex">
				<el-radio label="0">男</el-radio>
				<el-radio label="1">女</el-radio>
			</el-radio-group>
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click="submit">保存</el-button>
			<el-button type="danger" @click="close">关闭</el-button>
		</el-form-item>
	</el-form>
	<el-dialog v-model="isShow" :close-on-click-modal="false" class="comm-dialog" width="25%">
		<template #header>
			<span class="title">验证手机号</span>
		</template>
		<el-form :model="phoneForm" label-width="auto" ref="phoneRef" :rules="phoneRules" class="formStyle">
			<el-form-item label="新手机号" prop="phoneNum" style="width: 100%">
				<el-input v-model="phoneForm.phoneNum" placeholder="请输入手机号" clearable />
			</el-form-item>
			<el-form-item label="验证码" prop="code" style="width: 100%">
				<el-input v-model="phoneForm.code" placeholder="请输入验证码" clearable>
					<template #append>
						<el-button type="success" @click="getCode" :loading="sendCodeLoading" :disabled="disabled">{{ sendCodeContent }}</el-button>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitCode">确定</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script setup>
import { checkRole } from '@/utils/permission'
import { updateUserProfile } from '@/api/system/user'
import { nextTick, reactive, ref } from 'vue'
import { captchaAPI, changeCaptchaAPI } from '@/api/login'

const props = defineProps({
	user: {
		type: Object
	}
})
const emits = defineEmits(['phoneChange'])

const { proxy } = getCurrentInstance()

const rules = ref({
	nickName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
	bankCardNumber: [{ required: true, message: '银行账号不能为空', trigger: 'blur' }],
	address: [{ required: true, message: '公司地址不能为空', trigger: 'blur' }],
	email: [
		{ required: false, message: '邮箱地址不能为空', trigger: 'blur' },
		{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
	],
	phonenumber: [
		{ required: true, message: '手机号码不能为空', trigger: 'blur' },
		{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
	]
})

const isShow = ref(false)
const phoneForm = reactive({
	phoneNum: '',
	code: ''
})
const phoneRules = {
	phoneNum: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
	],
	code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
}
// 修改手机号码
function changePhone() {
	// phoneForm.phoneNum = props.user.phonenumber
	phoneForm.code = ''
	isShow.value = true
	nextTick(() => {
		proxy.$refs.phoneRef.clearValidate()
	})
}
const sendCodeContent = ref('获取验证码')
const sendCodeLoading = ref(false)
const disabled = ref(false)
// 获取验证码
function getCode() {
	proxy.$refs.phoneRef.validateField('phoneNum', (valid) => {
		if (!valid) return false
		sendCodeLoading.value = true
		captchaAPI({ phoneNumber: phoneForm.phoneNum })
			.then((res) => {
				sendCodeLoading.value = false
				disabled.value = true
				startCountdown()
			})
			.catch((err) => {
				sendCodeLoading.value = false
			})
	})
}
// 60s倒计时
const startCountdown = () => {
	let seconds = 60
	const timer = setInterval(function () {
		seconds--
		if (seconds > 0) {
			sendCodeContent.value = `发送验证码(${seconds})`
		} else {
			clearInterval(timer)
			sendCodeContent.value = '发送验证码'
			disabled.value = false
		}
	}, 1000)
}
// 验证验证码
function submitCode() {
	proxy.$refs.phoneRef.validate((valid) => {
		if (!valid) return false
		changeCaptchaAPI({
			phoneNumber: phoneForm.phoneNum,
			code: phoneForm.code
		}).then((res) => {
			if (res.code == 200) {
				proxy.$modal.msgSuccess('验证码校验成功')
				emits('phoneChange', phoneForm.phoneNum)
				isShow.value = false
			}
		})
	})
}

/** 提交按钮 */
function submit() {
	proxy.$refs.userRef.validate((valid) => {
		if (valid) {
			const userObj = JSON.parse(JSON.stringify(props.user))
			userObj.code = phoneForm.code
			updateUserProfile(userObj).then((response) => {
				proxy.$modal.msgSuccess('修改成功')
			})
		}
	})
}
/** 关闭按钮 */
function close() {
	proxy.$tab.closePage()
}
</script>

<style lang="scss" scoped>
:deep(.el-input-group__append, .el-input-group__prepend) {
	background: #5ac725;
	color: #fff;
	cursor: pointer;
}
.formStyle {
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
</style>
